"use client"

import React, { useState, useEffect } from "react"
import { Box, Typography, Paper, IconButton, Tooltip, Collapse, LinearProgress, Chip } from "@mui/material"
import { Psychology as ThinkingIcon, ExpandMore as ExpandIcon, ExpandLess as CollapseIcon, AutoAwesome as SparkleIcon } from "@mui/icons-material"

interface ThinkingDisplayProps {
	thinking: string
	isThinking?: boolean
}

export default function ThinkingDisplay({ thinking, isThinking = false }: ThinkingDisplayProps) {
	const [expanded, setExpanded] = useState(true) // 默认展开
	const [dots, setDots] = useState("")

	// 思考中的动态点效果
	useEffect(() => {
		if (isThinking) {
			const interval = setInterval(() => {
				setDots(prev => (prev.length >= 3 ? "" : prev + "."))
			}, 500)
			return () => clearInterval(interval)
		}
	}, [isThinking])

	if (!thinking && !isThinking) {
		return null
	}

	return (
		<Box sx={{ mb: 2 }}>
			{/* 整体思考过程面板 */}
			<Paper
				elevation={0}
				sx={{
					background: "rgba(248, 250, 252, 0.9)",
					backdropFilter: "blur(10px)",
					border: "1px solid rgba(148, 163, 184, 0.2)",
					borderRadius: 3,
					overflow: "hidden",
					transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
					"&:hover": {
						borderColor: "rgba(37, 99, 235, 0.3)",
						boxShadow: "0 2px 8px rgba(37, 99, 235, 0.1)"
					}
				}}
			>
				{/* 思考过程头部 */}
				<Box
					sx={{
						background: "rgba(37, 99, 235, 0.05)",
						borderBottom: "1px solid rgba(148, 163, 184, 0.15)",
						cursor: "pointer",
						transition: "background 0.2s ease",
						"&:hover": {
							background: "rgba(37, 99, 235, 0.08)"
						}
					}}
					onClick={() => setExpanded(!expanded)}
				>
					<Box sx={{ p: 2 }}>
						<Box
							sx={{
								display: "flex",
								alignItems: "center",
								justifyContent: "space-between"
							}}
						>
							<Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
								<Box
									sx={{
										display: "flex",
										alignItems: "center",
										justifyContent: "center",
										width: 32,
										height: 32,
										borderRadius: "50%",
										background: "#2563EB",
										boxShadow: "0 1px 3px rgba(37, 99, 235, 0.2)"
									}}
								>
									<ThinkingIcon sx={{ color: "white", fontSize: 18 }} />
								</Box>
								<Box>
									<Typography variant='subtitle2' sx={{ fontWeight: 600, color: "text.primary", mb: 0.5 }}>
										{isThinking ? `AI 正在思考中${dots}` : "AI 思考过程"}
									</Typography>
									{isThinking && (
										<Chip
											label='分析中'
											size='small'
											icon={<SparkleIcon />}
											sx={{
												height: 20,
												fontSize: "0.75rem",
												background: "#2563EB",
												color: "white",
												"& .MuiChip-icon": {
													color: "white",
													fontSize: 14
												}
											}}
										/>
									)}
								</Box>
							</Box>

							<Tooltip title={expanded ? "收起思考过程" : "展开思考过程"}>
								<IconButton
									size='small'
									sx={{
										p: 1,
										background: "rgba(37, 99, 235, 0.1)",
										"&:hover": {
											background: "rgba(37, 99, 235, 0.2)"
										}
									}}
								>
									{expanded ? <CollapseIcon fontSize='small' /> : <ExpandIcon fontSize='small' />}
								</IconButton>
							</Tooltip>
						</Box>

						{/* 思考进度条 */}
						{isThinking && (
							<Box sx={{ mt: 2 }}>
								<LinearProgress
									sx={{
										height: 2,
										borderRadius: 1,
										background: "rgba(37, 99, 235, 0.1)",
										"& .MuiLinearProgress-bar": {
											borderRadius: 1,
											background: "#2563EB"
										}
									}}
								/>
							</Box>
						)}
					</Box>
				</Box>

				{/* 思考内容 */}
				<Collapse in={expanded}>
					<Box
						sx={{
							background: "rgba(255, 255, 255, 0.5)",
							borderTop: "1px solid rgba(148, 163, 184, 0.15)",
							position: "relative"
						}}
					>
						<Box sx={{ p: 2.5 }}>
							{thinking ? (
								<Typography
									variant='body2'
									sx={{
										whiteSpace: "pre-wrap",
										wordBreak: "break-word",
										lineHeight: 1.7,
										color: "text.primary",
										fontSize: "0.9rem",
										position: "relative",
										"&::before": {
											content: '""',
											position: "absolute",
											left: -16,
											top: 0,
											bottom: 0,
											width: 3,
											background: "#2563EB",
											borderRadius: 2
										},
										pl: 2
									}}
								>
									{thinking}
								</Typography>
							) : (
								<Box sx={{ textAlign: "center", py: 2 }}>
									<Box
										sx={{
											display: "inline-flex",
											alignItems: "center",
											gap: 1,
											px: 2,
											py: 1,
											background: "rgba(37, 99, 235, 0.1)",
											borderRadius: 2,
											border: "1px solid rgba(37, 99, 235, 0.2)"
										}}
									>
										<SparkleIcon sx={{ fontSize: 16, color: "primary.main" }} />
										<Typography
											variant='body2'
											sx={{
												color: "primary.main",
												fontWeight: 500
											}}
										>
											正在分析问题{dots}
										</Typography>
									</Box>
								</Box>
							)}
						</Box>
					</Box>
				</Collapse>
			</Paper>
		</Box>
	)
}
